<p>This rule raises an issue when Angular output bindings are given aliases that differ from their property names.</p>
<h2>Why is this an issue?</h2>
<p>Aliasing output bindings creates unnecessary complexity in your Angular components and directives. When an output property has a different name
than its alias, developers must remember both names to use the component correctly.</p>
<p>This dual naming convention increases cognitive load and makes the codebase harder to maintain. It also breaks the principle of least surprise -
developers expect the output name to match the property name.</p>
<p>Consistent naming between properties and their public API makes components more predictable and easier to understand, especially for team members
who didn’t write the original code.</p>
<h3>What is the potential impact?</h3>
<p>Aliased outputs can lead to confusion during development and maintenance. Team members may struggle to understand which name to use when binding to
the output, leading to bugs and increased development time. The inconsistency also makes code reviews more difficult and reduces overall code
quality.</p>
<h3>How to fix in Angular?</h3>
<p>Remove the alias from the @Output decorator and use the property name directly.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
@Component()
class MyComponent {
  @Output('change') valueChange = new EventEmitter(); // Noncompliant
}
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
@Component()
class MyComponent {
  @Output() valueChange = new EventEmitter();
}
</pre>
<p>Remove the alias from the output() function and use the property name directly.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="2" data-diff-type="noncompliant">
@Component()
class MyComponent {
  valueChange = output({ alias: 'change' }); // Noncompliant
}
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="2" data-diff-type="compliant">
@Component()
class MyComponent {
  valueChange = output();
}
</pre>
<p>Remove aliases from the outputs metadata array.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="3" data-diff-type="noncompliant">
@Component({
  outputs: ['valueChange: change'] // Noncompliant
})
class MyComponent {}
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="3" data-diff-type="compliant">
@Component({
  outputs: ['valueChange']
})
class MyComponent {}
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/angular-eslint/angular-eslint">Angular ESLint</a> - Rule <a
  href="https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/no-output-rename.md">no-output-rename</a> </li>
  <li> Angular Component Interaction Guide - <a href="https://angular.dev/guide/components/outputs">Official Angular documentation on component
  outputs</a> </li>
  <li> Angular Style Guide - Naming - <a href="https://angular.dev/style-guide#naming">Angular’s official style guide recommendations for naming
  conventions</a> </li>
</ul>
